<template>
  <div class="swiper-container my-swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in SwiperList" :key="item.id">
        <img :src="item.url"/>
      </div>
    </div>
    <div class="swiper-pagination">
    </div>
  </div>
  
</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
  name:'HomeSwiper',
  props:{
    SwiperList:Array
  },
  mounted() {
    new Swiper(".my-swiper", {
      loop: true,
      autoplay: 3000,
      autoplayDisableOnInteraction : false,
      pagination : '.swiper-pagination',
      paginationType: 'bullets',//这里分页器类型必须设置为custom,即采用用户自定义配置 
      paginationClickable :true,
      paginationElement : 'span',
      uniqueNavElements :false,
      paginationBulletRender: function (swiper, index, className) {
      return '<span class="' + className + '">' + '' + '</span>';
  }

    })
  }
  
}
</script>
<style lang="scss" scoped>
.swiper-container{
  width: 100%;
  .swiper-wrapper{
    width: 100%;
    img{
      width: 100%;
    }
  }
}
</style>